<template>
    <div class="video-play">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="20">
                        <div>
                            <span class="border-left"></span>
                            视频播放
                        </div>
                    </Col>
                    <Col :span="4">
                        <div class="back">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="video-title">
                    当前播放《{{name}}》
                </div>
                <div class="video-box" v-if="videoTrue">
                    <video-player  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
                    </video-player>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
</template>

<script>
    // import video from '../../assets/video/video.mp4';
    // import videoImg from '../../assets/img/video.png'
    export default {
        data(){
            return {
                host: window.location.host,
                name: '',
                videoTrue: false,
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度。
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "",
                        // type: "video/webm",
                        // type: "video/mp4",
                        // type: "video/avi",
                        src: '' //url地址
                        // src: 'http://127.0.0.1/video_02.mp4'
                    }],
                    // poster: videoImg, //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                }
            }
        },
        mounted(){
           
        },

        created() {
            this.getUrl();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back();
            },
            getUrl() {
                if(!this.$route.params.name) {
                    this.$router.push({name:'VideoList'})
                }
                this.name = this.$route.params.name;
                let reg = /http/;
                if(reg.test(this.$route.params.url)) {
                    this.playerOptions.sources[0].src = this.$route.params.url;
                }else {
                    this.playerOptions.sources[0].src = 'http://renli.oss-cn-shenzhen.aliyuncs.com/' + this.$route.params.url;
                }
                this.videoTrue = true;
            }
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .video-play{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .video-title{
                width: 60%;
                margin: auto;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                color: #333;
            }
            .video-box{
                width: 60%;
                height: 80%;
                margin: auto;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>